<template>
  <el-row :gutter="40">
    <el-col :span="6">
      点击节点整行可展开
      <dataTree :treeData="treeData" clickNodeExpand :treeConfig="treeConfig"></dataTree>
    </el-col>
    <el-col :span="6">
      显示复选框，默认展开全部
      <dataTree
        :treeData="treeData"
        v-model="checkNode"
        showCheckbox
        expandAll
        :treeConfig="treeConfig"
      ></dataTree>
    </el-col>
    <el-col :span="6">
      不高亮选中节点
      <dataTree :treeData="treeData" noHighNode showCheckbox expandAll :treeConfig="treeConfig"></dataTree>
    </el-col>
    <el-col :span="6">
      点击节点勾选选中
      <dataTree
        :treeData="treeData"
        checkOnClickNode
        noHighNode
        showCheckbox
        expandAll
        :treeConfig="treeConfig"
      ></dataTree>
    </el-col>

    <el-col :span="6">
      展开的节点保存下载，刷新数据不会收起
      <el-button @click="resetTree">点击刷新树</el-button>
      <dataTree :treeData="treeData" clickNodeExpand noHighNode :treeConfig="treeConfig"></dataTree>
    </el-col>

    <el-col :span="6">
      <el-button @click="getCheckedNodes">获取选中节点</el-button>
      <dataTree
        ref="getcheckedTree"
        showCheckbox
        :treeData="treeData"
        clickNodeExpand
        :treeConfig="treeConfig"
      ></dataTree>
    </el-col>

    <el-col :span="6">
      <el-button @click="setCheckedNodes">设置节点选中</el-button>
      <el-button @click="getKeys">获取选中keys</el-button>
      <dataTree
        ref="setcheckedTree"
        showCheckbox
        :treeData="treeData"
        clickNodeExpand
        :treeConfig="treeConfig"
      ></dataTree>
    </el-col>

    <el-col :span="6">
      懒加载
      <dataTree
        lazy
        :loadNodeFun="loadNodeFun"
        showCheckbox
        clickNodeExpand
        :treeConfig="treeConfig"
      ></dataTree>
    </el-col>
  </el-row>
</template>

<script>
export default {
	name:'tree_message',
  components: { dataTree:()=>import("@/components/tree_view/index") },
  data() {
    return {
      treeData: [
        {
          title: "1",
          key: "1",
          list: [],
        },
        {
          title: "2",
          key: "2",
          list: [
            { title: "3", key: "3", list: [
              { title: "4", key: "4", list: [] },
              { title: "5", key: "5", list: [] }
            ] },
            { title: "6222222222222222222222222222222222222222222222221", key: "6", list: [] },
          ],
        },
        {
          title: "7",
          key: "7",
          list: [
            { title: "8", key: "8", list: [] },
            { title: "9", key: "9", list: [] },
            { title: "10", key: "10", list: [] },
          ],
        },
        { title: "11", key: "11", list: [] },
      ],
      treeConfig: {
        label: "title",
        id: "key",
        children: "list",
      },
      checkNode: "",
      setList: ["1", "4", "5", "9"],
    };
  },
  watch: {
    checkNode() {
      console.log(this.checkNode);
    },
  },
  methods: {
    resetTree() {
      this.treeData = [
        { title: "11111", key: "11111", list: [] },
        {
          title: "2",
          key: "2",
          list: [
            { title: "2.1", key: "2.1", list: [] },
            { title: "2.2", key: "2.2", list: [] },
          ],
        },
        {
          title: "3",
          key: "3",
          list: [
            { title: "3.1", key: "3.1", list: [] },
            { title: "3.2", key: "3.2", list: [] },
            { title: "3.3", key: "3.3", list: [] },
          ],
        },
      ];
    },
    getCheckedNodes() {
      let data = this.$refs.getcheckedTree.getCheckedNodesByKeys();
      console.log(data);
    },
    setCheckedNodes() {
      this.$refs.setcheckedTree.setCheckNodeByKeys(this.setList);
    },
    getKeys() {
      let data = this.$refs.setcheckedTree.getCheckedNodesByKeys();
      console.log(data);
    },
    loadNodeFun(node, resolve) {
      if (node.level === 0) {
        this.num = 0;
        return resolve([{ title: "region", key: "1" }]);
      }
      if (node.level > 5) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            title: "leaf",
            key: this.num++,
            leaf: true,
          },
          {
            key: this.num++ + "2",
            title: "zone",
          },
        ];

        resolve(data);
      }, 500);
    },
  },
  created() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.el-row{
  margin: 0 !important;
}
.el-col {
  height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}
</style>
